// 评审人
import React from 'react';
import { Balloon } from '@teamix/ui';
import { YunxiaoIcon } from '@alife/devops-ui';
import TextAvatar from '@txdfe/at-text-avatar';
import './assignees.scss';
import intl from '../../../../../../../../../locale';

const prefix = 'mr-basic-info-assignees-detail';
export default class Assignees extends React.Component {
  render() {
    const { value, needAvatar } = this.props;

    const dataSource = value.map((item) => {
      item._userId = item._userId || item.tb_user_id;
      switch (item.status) {
        case 'approved':
          item.statusText = intl.get({
            id: 'code-assets.components.basicInfo.assignees.Passed',
            defaultMessage: '已通过',
          });
          item.marker = (
            <div className="mr-overview-avatar-marker commented">
              <img src="https://img.alicdn.com/tfs/TB1.4QPii_1gK0jSZFqXXcpaXXa-24-24.png" alt="" />
            </div>
          );

          break;
        case 'comment':
          item.statusText = intl.get({
            id: 'code-assets.components.basicInfo.assignees.Commented',
            defaultMessage: '已评论',
          });
          item.marker = (
            <div className="mr-overview-avatar-marker reviewed">
              <img src="https://img.alicdn.com/tfs/TB1THZNieL2gK0jSZPhXXahvXXa-24-24.png" alt="" />
            </div>
          );

          break;
        case 'pending':
          item.statusText = '待评审';
          item.marker = (
            <div className="mr-overview-avatar-marker not-reviewed">
              <img src="https://img.alicdn.com/tfs/TB1kVgRihv1gK0jSZFFXXb0sXXa-24-24.png" alt="" />
            </div>
          );

          break;
        default:
          item.statusText = '';
          item.marker = null;
      }

      return item;
    });

    if (dataSource && dataSource.length) {
      return (
        <div
          className={`${prefix} hasData ${needAvatar ? 'needAvatar' : ''}`}
          onClick={this.onClickTrigger}
          ref={(o) => {
            this.triggerEle = o;
          }}
        >
          {dataSource.map((item, i) => {
            return (
              <React.Fragment>
                {item.status ? (
                  <Balloon.Tooltip
                    trigger={
                      <TextAvatar
                        image={item.avatar_url}
                        text={item.name}
                        needAddedText
                        size="xs"
                        marker={item.marker}
                      />
                    }
                    type="primary"
                    align="t"
                  >
                    {item.statusText}
                  </Balloon.Tooltip>
                ) : (
                  <span>
                    {item.name}
                    {i !== dataSource.length - 1 ? '，' : ''}
                  </span>
                )}
              </React.Fragment>
            );
          })}
        </div>
      );
    }
    return (
      <div className={`${prefix} wait`}>
        <YunxiaoIcon type="member-line" style={{ color: '#bfbfbf', marginRight: 4 }} />
        {intl.get({
          id: 'code-assets.components.basicInfo.assignees.NoReviewerAdded',
          defaultMessage: '未添加评审人',
        })}
      </div>
    );
  }
}
